<template>
  <div :class="type"
       v-dragula="model" bag="dragBag">
      <div v-for="item in model"
           :key="item._id"
           class="info-item"
           data-source
      >
        <div class="img" v-lazy:background-image.container="item.images[0]"></div>
        <h5 class="line-clamp-2">{{item.title}}</h5>
        <div class="area"><strong>{{item.estate.area}}</strong>m<sup>2</sup></div>
        <div class="rental"><strong>{{item.estate.rental}}</strong> 元/月</div>
      </div>
    </div>
</template>

<script>
  import draggable from 'vuedraggable';
  import Vue from 'vue';


  export default {
    components:{draggable},

    props: {
      type: String,
      model: Array
    },
    computed: {
    },
    created() {

      Vue.vueDragula.options('dragBag', {
        copy: function (el, source) {
          return el.className === 'info-source-item';
        },

      })

      Vue.vueDragula.eventBus.$on(
        'drop',
        function (args) {
          console.log(args)

        }
      )
      Vue.vueDragula.eventBus.$on(
        'dropModel',
        function (args) {
          console.log(args)

        }
      )
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .img{
        margin: 8px 0;
        width: 80px;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        &[lazy=error],&[lazy=loading]{
            background-size: 50%;
        }
    }
  .info-item{
      display: block;
    h5,.area,.rental{
      display: none;
    }
  }
  .info-source-list{
    .info-item{
      border: 1px solid #d1dbe5;
      border-radius: 4px;
      background-color: #fff;
      overflow: hidden;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
      margin: 10px 0;
      padding: 10px;
      .img{
        float: left;
        margin-right: 10px;
      }
      h5{
        display: block;
        margin: 6px 0;
        font-size: 14px;
        height: 38px;
        line-height: 19px;
      }
      .area{
        display: inline-block;
        strong{
          color: #a46497;
        }
      }
      .rental{
        display: inline-block;
        strong{
          color: #a46497;
        }
      }
    }
  }

  .new-sm-list{
    height: 228px;
    background-color: #eee;
    .info-item{
      float: left;
      width: 282px;
      height: 70px;
      padding: 5px 0;
      margin: 3px;
      background-color: #fff;
      font-size: 12px;
      .img {
        float: left;
        width: 80px;
        height: 60px;
        margin: 0 5px 0 0;
      }
      h5{
        margin: 0 0 10px 0;
      }
      .area{
        display: inline-block;
      }
      .rental{
        display: inline-block;
      }
    }
  }


  .new-list{
    width: 290px;
    height: 228px;
    background-color: #eee;
    border-right: 1px solid #aaa;
    overflow: hidden;
    &.open{
      width:872px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    .info-item{
      display: inline-block;
      position: relative;

      .img{
        width: 290px;
        height: 228px;
        margin: 0;
      }
      h5{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        color: #fff;
        margin: 5px;
      }
    }
  }

</style>